<template>
  <!-- 修改场所管理员 -->
  <view class="siteInfoPerson">
    <view class="content">
      <view class="wrapper-content">
        <scroll-view scroll-y="true" @scrolltolower="scrollBottom" :style="[
            {
              height: '100%',
            },
          ]" v-if="dataSource.length">
          <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
            <view class="items">
              <view class="lt">
                <view class="clause">
                  微信昵称：
                  <text>{{ v.realName || '暂无' }}</text>
                </view>
                <view class="clause">
                  手机号码：
                  <text>{{ v.mobile }}</text>
                </view>
              </view>
              <view class="rt">
                <image :src="v.avateor" mode=""></image>
              </view>
            </view>

            <view class="down">
              <view class="rt">
                <image :src="
                    v.responsible == 1
                      ? baseImgUrl + 'select_icon1.png'
                      : baseImgUrl + 'select_icon2.png'
                  " @click="rdioHandle(v)"></image>
                {{ v.responsible ? "主要负责人" : "设为主要负责人" }}
              </view>
              <view class="rt del" v-if="!v.responsible" @click="delPerson(v)">
                <image :src="baseImgUrl + 'delete_icon.png'" mode=""></image>
                删除
              </view>
            </view>
          </view>
        </scroll-view>
        <view v-if="!dataSource.length">
          <u-empty mode="list" text="暂无内容！" :icon="baseImgUrl + 'no-icon2.png'">
          </u-empty>
        </view>
      </view>
    </view>

    <view class="btns">
      <button class="submit-btn" type="primary"
        :data-url="`/selfInfo/modificationSite/newSiteAdministrator?id=${options.id}`" @click="handleClickRouter"
        icon="map" style="width: 100%">
        + 添加管理员
      </button>
    </view>
  </view>
</template>

<script>
  import {
    userPage,
    userSetup,
    userDelete
  } from "@/api/myself.js";
  import {
    handleClickRouter,
    Toast,
    navBack
  } from "@/utils/util.js";

  export default {
    name: "siteInfoPerson",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        options: {},
        dataSource: [],
        pageBottom: false,
        pageConfig: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
        },
      };
    },
    onLoad(options) {
      this.options = options;
    },
    onShow() {
      this.dataSource = [];
      this.pageConfig.pageNo = 1;
      this.getList();
    },
    methods: {
      handleClickRouter,
      scrollBottom() {
        let current = (this.pageConfig.pageNo += 1);
        let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
        if (current <= pages) {
          this.getList();
        } else {
          this.pageBottom = true;
        }
      },
      rdioHandle(v) {
        if (v.responsible == 1) return;
        userSetup({
          id: v.id
        }).then((res) => {
          if (res.code == 200) {
            Toast(res.message);
            navBack();
          }
        });
      },
      delPerson(v) {
        userDelete(v.id).then((res) => {
          if (res.code == 200) {
            Toast("删除成功");

            this.dataSource = [];
            this.pageConfig.pageNo = 1;
            this.getList();
          }
        });
      },
      getList() {
        let data = {
          companyMessageId: this.options.id,
          pageNo: this.pageConfig.pageNo,
          pageSize: this.pageConfig.pageSize,
        };

        userPage(data).then((res) => {
          this.dataSource = this.dataSource.concat(res.result.records || []);
          this.pageConfig.total = res.result.total;
        });
      },
    },
  };
</script>

<style lang="scss">
  .siteInfoPerson {
    flex: 1;
    background-color: #f9f9f9;

    .content {
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      width: calc(100% - 35rpx);
      height: calc(100vh - 84px);
      overflow-y: auto;
    }

    .wrapper-content {
      height: calc(100vh - 84px);

      .wrapper-item {
        padding: 35rpx;
        background: #ffffff;
        margin-bottom: 20rpx;

        .items {
          display: flex;

          .lt {
            width: 517rpx;
            max-width: 517rpx;

            .clause {
              margin-bottom: 20rpx;
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #7f7e83;

              text {
                color: #333333;
              }
            }
          }

          .rt {
            width: 104rpx;
            height: 104rpx;
            margin-left: 30rpx;

            image {
              border-radius: 50%;
              width: 100%;
              height: 100%;
            }
          }
        }

        .down {
          display: flex;
          justify-content: space-between;
          margin-top: 20rpx;
          padding-top: 20rpx;
          border-top: 1px solid #dedcdc;
          text-align: right;

          .rt {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;

            image {
              vertical-align: text-bottom;
              margin-right: 5px;
              width: 40rpx;
              height: 40rpx;
            }
          }

          .del {
            color: #eb0101;
          }
        }
      }
    }

    .popupClass {
      .pop-title {
        padding: 30rpx 35rpx;
        border-radius: 16rpx 16rpx 0 0;

        color: #333333;
        font-size: 32rpx;
        font-weight: bold;
        background: #e9f4ff;

        text {
          margin-right: 10rpx;
          width: 20rpx;
          border-left: 4px solid #2488f5;
        }
      }

      .pop-center {
        padding: 30rpx 40rpx;

        .codeForm {
          display: flex;
          justify-content: space-around;
        }
      }

      .btns {
        margin-top: 50rpx;

        .reset-btn,
        .submit-btn {
          height: 80rpx;
          line-height: 80rpx;
        }
      }
    }
  }
</style>